<template>
	<view class="container">
		<hx-navbar title="我的优惠券" :back="true" :backgroundColor="[255, 255, 255]" :fixed="true">
		</hx-navbar>
		<view class="ytx"></view>
		<view class="main">
			<view class="main-content usebackground">
				<image src="/static/imgs/useCoupon.png" mode="scaleToFill"></image>
				<view class="money">
					<view style="font-size: 32rpx;margin-bottom: 8rpx;">￥<text style="font-size: 72rpx;font-weight: 800;">10</text></view>
					<view class="ct">水蜜桃指定</view>
				</view>
				<view class="explain">
					<view class="name">桃类专享优惠券</view>
					<view class="useif">满120减10 </view>
					<view style="color:#A1A1A1 ;" class="narrow">有效期:2020/06/12-2020/12/31</view>
				</view>
				<view class="use" @click="selected">
						立即使用
				</view>
			</view>
			<view class="main-content selectCoupon">
				<image src="/static/imgs/selectCoupon.png" mode="scaleToFill"></image>
				<view class="money">
					<view style="font-size: 36rpx;margin-bottom: 8rpx;">￥<text style="font-size: 72rpx;font-weight: 800;">10</text></view>
					<view class="ct">全场通用</view>
				</view>
				<view class="explain">
					<view class="name">开业酬宾优惠券</view>
					<view class="useif">满98减10 </view>
					<view style="color:#A1A1A1 ;" class="narrow">有效期:2020/06/12-2020/12/31</view>
				</view>
				<view class="use" @click="selected">
						立即使用
				</view>
			</view>
			<view class="main-content sdf sdfcolor">
				<image src="/static/imgs/invalidCoupon.png" mode="scaleToFill"></image>
				<view class="money">
					<view style="font-size: 32rpx;margin-bottom: 8rpx;">￥<text style="font-size: 72rpx;font-weight: 800;">5</text></view>
					<view class="ct">全场通用</view>
				</view>
				<view class="explain">
					<view class="name">开业酬宾优惠券</view>
					<view class="useif">无门槛红包 全场通用 </view>
					<view style="color:#A1A1A1 ;" class="narrow">有效期:2020/04/13-2020/05/13</view>
				</view>
				<view class="use" @click="selected">
						已过期
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [

				],
				inid: 0,
				judge: null,
			};
		},
		onLoad(option) {

		},
		methods: {

			selected() {

			},
		},
	};
</script>

<style>
	.container {
		background-color: #FFFFFF;
	}

	.ytx {
		width: 100%;
		height: 20rpx;
		background-color: #F5F5F5;
	}

	.main {
		margin: 30rpx 30rpx 100rpx 30rpx;
	}

	.main-content {
		position: relative;
		z-index: 10;
		width: 100%;
		display: flex;
		margin-bottom: 20rpx;
		box-shadow: 8rpx 8rpx 18rpx #E8E7E7;
	}

	.main-content image {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		z-index: -1;
	}

	.usebackground {
		background: url(../../static/imgs/useCoupon.png) 0 0 no-repeat;
		background-size: 100%;
	}

	.selectCoupon {
		background: url(../../static/imgs/selectCoupon.png) 0 0 no-repeat;
		background-size: 100%;
	}

	.sdf {
		background: url(../../static/imgs/invalidCoupon.png) 0 0 no-repeat;
		background-size: 100%;
	}

	.sdf.sdfcolor,
	.sdf .useif,
	.sdf .use {
		color: #C2C2C2;
	}

	.money {
		text-align: center;
		width: 31%;
		padding: 40rpx 0;
		color: #FFFFFF;
	}

	.explain {
		width: 60%;
		padding: 10rpx 0 10rpx 56rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.explain .name {
		font-size: 32rpx;
		margin-bottom: 6rpx;
		font-weight: 800;
	}

	.ct {
		margin-left: 6rpx;
	}

	.useif {
		color: #444444;
		margin-bottom: 30rpx;
		font-size: 24rpx;
	}

	.use {
		width: 7%;
		margin-right: 1%;
		color: #26C594;
		display: flex;
		align-items: center;
		font-size: 24rpx;
	}

	.narrow {
		transform: scale(0.9);
		margin-left: -18rpx;
		font-size: 22rpx;
	}

	.btns-foot {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		color: #FFFFFF;
		font-size: 34rpx;
		background-color: #26C594;
		position: fixed;
		bottom: 0;
		z-index: 19;
	}

	.round {
		width: 32rpx;
		height: 32rpx;
		line-height: 32rpx;
		border-radius: 50%;
		font-size: 28rpx;
		text-align: center;
		font-weight: 800;
		color: #FFFFFF;
		background-color: #26C594;
	}

	.text-green {
		background-color: #26C594;
	}

	.text-gray {
		background-color: #DCDCDC;
	}
</style>
